<template>
  <div class="body">
    <div class="table_content">
      <div class="table_filtrate">
        <div class="tf_item">
          <div class="tag">时间范围</div>
          <el-date-picker
            v-model="tableParams.time_interval"
            class="input"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            size="mini"
          />
        </div>

        <div class="tf_item">
          <div class="tag">搜索</div>

          <el-input
            v-model="tableParams.fuzzy_search"
            class="input_fuzzy_search input"
            placeholder="模糊搜索 名字"
            clearable
            size="mini"
          />
        </div>

        <div class="tf_item">
          <div class="tag">渠道ID</div>
          <el-input
            v-model="tableParams.channel_id"
            class="input"
            size="mini"
            placeholder="渠道ID"
            clearable
          />
        </div>

        <div class="tf_item">
          <div class="tag">手机号</div>
          <el-input
            v-model="tableParams.mobile"
            class="input_fuzzy_search input"
            placeholder="手机号"
            size="mini"
            clearable
          />
        </div>

        <div v-if="config_current" class="tf_item">
          <div class="tag">线索状态</div>
          <el-select
            v-model="tableParams.stage"
            size="mini"
            class="inp"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in config_current.clue.stage"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="tf_item">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="loadTableData"
          >搜索</el-button>
        </div>
      </div>

      <div class="table_operate">
        <div class="tool-self">
          <el-button
            class="btn_export"
            type="info"
            size="mini"
            @click="exportExcelFun()"
          >导出<i class="el-icon-download el-icon--right" /></el-button>
        </div>
      </div>

      <div class="table-card">
        <el-table
          id="table_id"
          v-loading="loading.table"
          class="table"
          :data="tableData.data"
          :row-class-name="tableRowClassName"
          :border="true"
          size="mini"
        >
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column label="详情" width="60">
            <template slot-scope="scope">
              <el-link
                class="handle"
                type="warning"
                @click="handleDialogInfo(scope.row)"
              >查看</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="110" />
          <el-table-column prop="car" label="车产" width="60" />
          <el-table-column prop="house" label="房产" width="60" />
          <el-table-column prop="accumulation_fund" label="公积金" width="80" />
          <el-table-column prop="social_security" label="社保" width="60" />
          <el-table-column prop="insurance" label="保单" width="60" />
          <el-table-column prop="business_owner" label="营业执照" width="90" />
          <el-table-column prop="work" label="工作" width="90" />
          <el-table-column prop="loan_money" label="需求金额" width="90" />
          <el-table-column prop="sesame_score" label="芝麻分" width="90" />
          <el-table-column prop="huabei_quota" label="花呗额度" width="110" />
          <el-table-column prop="baitiao_quota" label="白条额度" width="90" />
          <el-table-column prop="region" label="城市" width="200" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span class="ellipsis" style="font-size: 12px">{{
                scope.row.province +
                  "-" +
                  scope.row.city +
                  "-" +
                  scope.row.district
              }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="channel_id" label="渠道ID" width="60" />

          <el-table-column label="申请时间" width="140">
            <template slot-scope="scope">
              <div>{{ scope.row.createtime }}</div>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="140" prop="stage" />
        </el-table>

        <el-pagination
          v-if="!loading.table"
          class="table_pagination"
          :current-page.sync="tableParams.page"
          :page-sizes="$pageSize"
          :page-size="tableParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
        />
      </div>
    </div>

    <el-dialog title="查看" :visible.sync="dialog_info.status" width="70%">
      <el-descriptions
        v-if="dialog_info.data"
        class="margin-top"
        title=""
        :column="3"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            姓名
          </template>
          <span>
            {{ dialog_info.data.name }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            年龄
          </template>
          <span>
            {{ dialog_info.data.age }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline" />
            性别
          </template>
          <span>
            {{ dialog_info.data.gender }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets" />
            手机号
          </template>
          <div>
            <el-link
              v-if="dialog_info.data.mobile == false"
              type="primary"
              @click="handleDialogInfoMobileShow(dialog_info)"
            >立即查看</el-link>
            <div v-else>{{ dialog_info.data.mobile }}</div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            <i class="el-icon-office-building" />
            地区
          </template>
          <span>
            {{ dialog_info.data.region }}
          </span>
        </el-descriptions-item>

        <el-descriptions-item :span="2">
          <template slot="label">
            <i class="el-icon-office-building" />
            申请时间
          </template>
          {{ dialog_info.data.createtime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            贷款期限
          </template>
          <span v-if="dialog_info.data.product">{{
            dialog_info.data.product.loan_cycle
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            资金需求
          </template>
          <span>{{ dialog_info.data.loan_money }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            芝麻分
          </template>
          <span>{{ dialog_info.data.sesame_score }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            车产
          </template>
          <span>{{ dialog_info.data.car }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            房产
          </template>
          <span>{{ dialog_info.data.house }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            保单
          </template>
          <span>{{ dialog_info.data.social_security }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> <i class="el-icon-user" />公积金</template>
          <span>{{ dialog_info.data.accumulation_fund }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> <i class="el-icon-user" />企业主</template>
          <span>{{ dialog_info.data.business_owner }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> <i class="el-icon-user" />职业</template>
          <span>{{ dialog_info.data.work }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { getConfigCurrent } from '@/utils/appUtil'
import { convertRange } from '@/utils/clueUtil'
import { apiClueListpage } from '@/api/apiCommon'
import { paramsDeleteNull, hidePart } from '@/utils/common'
import { exportExcel } from '@/utils/htmlToExcelUtils'
import {
  getCity,
  trCity,
  authJudgment,
  initTableData,
  initPickerOptions
} from '@/utils/appUtil'
import {
  getDateDaysAgo,
  getStartOfDayTimestamp,
  formatTimestamp
} from '@/utils/datetimeUtil'

export default {
  name: 'Index',
  data() {
    return {
      tableParams: {
        page: 1,
        size: 15,
        time_interval: [getDateDaysAgo(), new Date()],
        organization_personnel_uid: '',
        fuzzy_search: '',
        mobile: '',
        channel_id: '',
        stage: ''
      },
      tableData: {},
      tableInfo: {
        status: false
      },
      business_select: [],
      organization_select: [],
      fromViewCofing: {
        input_width: '120px',
        label_width: '120px'
      },
      city_data: [],
      dialog_info: {
        status: false,
        data: null
      },
      pickerOptions: {},
      loading: {
        dialog_create: false,
        table: false,
        form: false
      },
      config_current: null
    }
  },
  created() {
    const _this = this
    this.reqApiCity()
    getConfigCurrent().then((response) => {
      _this.config_current = response
      console.log(_this.config_current, 'this.config_current')
    })
    this.pickerOptions = initPickerOptions()
    // console.log(city,'city')
  },
  methods: {
    // 导出表格
    exportExcelFun() {
      exportExcel('线索')
    },
    // 列表请求
    loadTableData(is_initpage = true) {
      const _this = this
      if (is_initpage) {
        _this.tableParams.page = 1
      }
      _this.loading_start('table')
      _this.tableData = initTableData()
      var tableParamsData = { ..._this.tableParams }

      var start_time = getStartOfDayTimestamp(
        tableParamsData['time_interval'][0]
      )
      var end_time =
        getStartOfDayTimestamp(tableParamsData['time_interval'][1]) + 86400

      delete tableParamsData['time_interval']
      tableParamsData['start_time'] = start_time
      tableParamsData['end_time'] = end_time

      if (!tableParamsData['organization_personnel_uid']) {
        delete tableParamsData['organization_personnel_uid']
      }

      if (!tableParamsData['fuzzy_search']) {
        delete tableParamsData['fuzzy_search']
      }

      if (!tableParamsData['mobile']) {
        delete tableParamsData['mobile']
      }

      apiClueListpage(tableParamsData)
        .then((response) => {
          const result = response
          var tableData = result.data.datalist
          // assignValueToList(tableData.data).then((response) => {
          //   tableData.data = response;
          //   console.log(tableData, "tableData");
          //   _this.tableData = tableData;
          //   _this.loading_end("table");
          // });
          _this.tableData = tableData
          _this.loading_end('table')
        })
        .catch(function(result) {
          _this.loading_end('table')
        })
    },
    // 状态转换
    fuStatusCh(status) {
      if (status == 1) {
        return '有'
      } else {
        return '无'
      }
    },
    // 获取商务人员
    reqApiAgent() {
      const _this = this
      _this.loading_start('table')
      apiAgentList({
        page: 1,
        size: 99,
        status: 'normal',
        group_id: 3
      }).then((response) => {
        const result = response.data.datalist.data
        _this.business_select = result
        _this.loading_end('table')
      })
    },
    // 获取机构列表
    reqApiOrganization(business_uid) {
      const _this = this
      _this.loading_start('table')
      apiOrganizationSelects({
        page: 1,
        size: 99,
        business_uid: business_uid
      }).then((response) => {
        const result = response.data
        _this.organization_select = result.selects
        _this.loading_end('table')
      })
    },
    // 切换商务人员
    changeSelectBusinessuid(business_uid) {
      this.tableParams.o_id = ''
      this.reqApiOrganization(business_uid)
    },
    // 页面跳转
    handleToGoCreate() {
      this.$router.push({ path: '/product/create', query: { id: 0 }})
    },
    // 表格行状态
    tableRowClassName({ row, rowIndex }) {
      if (row['status'] == 'stop') {
        return 'discard-row'
      }
    },
    // 表格操作
    handleTableEdit(index, row) {
      this.$router.push({ path: '/product/update', query: { id: row.id }})
    },
    // 表格恢复
    handleTableRegain(index, row) {
      var _this = this
      var params = {
        id: row.id,
        status: 'normal'
      }
      _this.loading_start('table')
      apiProductUpdatePart(params).then((response) => {
        _this.loading_end('table')
        _this.loadTableData()
      })
    },
    // 表格删除
    handleTableDelete(index, row) {
      const _this = this
      _this.loading_start('table')
      apiProductDelete({
        id: row.id
      }).then((response) => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        _this.loading_end('table')
        _this.loadTableData()
      })
    },
    // 打开详情
    handleDialogInfo(data) {
      var dialog_info = this.dialog_info
      dialog_info.status = true
      dialog_info.data = data

      dialog_info.is_show_mobile = false
      this.dialog_info = dialog_info
    },
    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val
      this.loadTableData(false)
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val
      this.loadTableData(false)
      console.log(`当前页: ${this.tableParams.page}`)
    },
    // 部分状态改变
    tableUpdateItem(item) {
      var _this = this
      var params = {
        id: item.id,
        push_status: item.push_status,
        entry_status: item.entry_status
      }
      _this.loading_start('table')
      apiProductUpdatePart(params).then((response) => {
        _this.loading_end('table')
      })
    },
    // 获取城市
    reqApiCity() {
      const _this = this
      _this.loading_start('table')
      getCity().then((response) => {
        _this.city_data = response
        _this.loading_end('table')
        _this.loadTableData()
      })
    },

    // 加载开始...
    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true
          setTimeout(() => {
            this.loading[key] = false
          }, 5000)
        })
      } else {
        this.loading[keys] = true
        setTimeout(() => {
          this.loading[keys] = false
        }, 5000)
      }
    },
    // 加载结束...
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.$nextTick(() => {
            this.loading[key] = false
          })
        })
      } else {
        this.$nextTick(() => {
          this.loading[keys] = false
        })
      }
    }
  }
}
</script>

<style lang="scss">
.details {
}
</style>
